<template>
    <div style="padding-bottom:10px" :class="className" :id="id" :style="{height:height,width:width}"></div>       
</template>
<script>
// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');

// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');

// 展示最高最低
require('echarts/lib/component/markPoint');

// 展示平均线
require('echarts/lib/component/markLine');

export default {
    name: 'homeWorkEchart',
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        },
        obj: {
            type: Object,
            require: true
        }
    },
    data() {
        return {
        };
    },
  watch: {
    obj: {
      handler: function(val, oldVal) {
        if (val) {
          this.setOptions();
        }
      },
      deep: true
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      this.setOptions();
    },
    setOptions() {
      this.chart.setOption({
        backgroundColor: "#ffffff",
        grid: {
          left: "0",
          right: "3%",
          bottom: "7%",
          containLabel: true
        },
        color: ["#37A2DA"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        dataZoom: [
          {
            show: this.obj.xData.length > 15 ? true : false,
            start: 0,
            end: this.obj.xData.length > 15 ? 50 : 100,
            bottom: "12%"
          }
        ],
        legend: {
          data: [this.obj.legendD],
          x: "center"
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.obj.xData,
            axisLabel: {
              // 将X轴的文本标签全部显示
              interval: 0, // 标签显示挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） |{number}（用户指定选择间隔） {function}函数回调，传递参数[index，data[index]]，返回true显示，返回false隐藏
              rotate: 15 // 标签旋转角度，默认为0，不旋转，正值为逆时针，负值为顺时针，可选为：-90 ~ 90
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: this.obj.legendD,
            type: "bar",
            data: this.obj.yData,
            barWidth: "40%",
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      });
    }
  }
}
</script>
